<template>
  <section ref="itemRef" @mouseover="over(data.id)">
    <el-row class="hotel_item">
      <el-col :span="8" class="left_pic">
        <nuxt-link :to="`/hotel/${data.id}.html`">
          <img :src="data.photos" :alt="data.name" />
        </nuxt-link>
      </el-col>
      <el-col :span="10" class="middle_info">
        <h4>
          <nuxt-link :to="`/hotel/${data.id}.html`">{{ data.name }}</nuxt-link>
        </h4>
        <div class="hotel_en_name">
          <span>{{ data.alias }}</span>
          <span
            v-if="data.hotellevel"
            class="huangguan"
            :title="`${data.hotellevel.level}星级`"
          >
            <i
              v-for="item in data.hotellevel.level"
              :key="item"
              class="iconfont iconhuangguan"
            ></i>
          </span>
          <span v-if="data.hoteltype">{{ data.hoteltype.name }}</span>
        </div>
        <el-row class="quantity" type="flex" align="middle">
          <el-col :span="10">
            <el-rate
              v-model="data.stars"
              disabled
              show-score
              text-color="#ff9900"
              :score-template="data.stars + '分'"
            ></el-rate>
          </el-col>
          <el-col :span="7">
            <span class="height-light">{{ getNum() }}</span>
            条评价
          </el-col>
          <el-col :span="7">
            <span class="height-light">{{ getNum() }}</span>
            篇游记
          </el-col>
        </el-row>
        <div class="location">
          <i class="iconfont iconlocation"></i>
          位于: {{ data.address }}
        </div>
      </el-col>
      <el-col :span="6" class="right_price">
        <ul>
          <li
            v-for="(item, index) in data.products"
            :key="index"
            class="products_item"
          >
            <span>{{ item.name }}</span>
            <div>
              <span class="height_line">&yen;{{ item.price }}</span>
              起
              <i class="el-icon-arrow-right"></i>
            </div>
          </li>
        </ul>
      </el-col>
    </el-row>
  </section>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default() {
        return {};
      },
    },
  },

  methods: {
    // 生成随机数
    getNum() {
      return Math.floor(Math.random() * 101);
    },
    over(item) {
      this.$emit("over", item);
    },
  },
};
</script>

<style lang="less" scoped>
.hotel_item {
  padding: 20px 5px;
  border-bottom: 1px solid #ddd;
}

.left_pic {
  padding-right: 10px;

  img {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
  }
}

.middle_info {
  padding: 0 10px;

  h4 {
    font-weight: normal;
    font-size: 24px;
  }

  .hotel_en_name {
    color: #999;
    margin-bottom: 0.5em;

    .huangguan {
      display: inline-block;
      vertical-align: bottom;

      .iconhuangguan {
        float: left;
        color: #f90;
      }
    }
  }

  .quantity {
    .height-light {
      color: #f90;
      padding-left: 20px;
    }
  }

  .location {
    margin-top: 20px;
    font-size: 14px;
    color: #666;
  }
}

.right_price {
  padding: 20px 10px 0;

  .products_item {
    display: flex;
    padding: 0 20px 0 10px;
    height: 50px;
    font-size: 14px;
    color: #666;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;
    cursor: pointer;

    .height_line {
      font-size: 18px;
      color: #f90;
    }

    &:hover {
      background-color: #f5f7fa;
    }
  }
}
</style>